<template>
	<view class="top-box">
		<view>Hi</view>
		<view class="next-text">欢迎使用寻航！</view>
	</view>
	<!-- 登录、注册 -->
	<view class="center-box">
		<view class="nav">
			<view class="left" :class="current==1?'select':''" @click="click" data-code="1">
				<text>登录</text>
			</view>
			<view class="right" :class="current==0?'select':''" @click="click" data-code="0">
				<text>注册</text>
			</view>
		</view>
		<!-- 登录 -->
		<uni-forms class="input-box" ref="loginForm" v-if="current == 1" :modelValue="loginForm" :rules="loginRules"
			validate-trigger="bind">
			<uni-forms-item name="username">
				<uni-easyinput type="text" v-model="loginForm.username" prefix-icon="person" focus placeholder="用户名" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput type="password" v-model="loginForm.password" prefix-icon="locked" placeholder="密码" />
			</uni-forms-item>
			<view class="forget">
				<text>忘记密码?</text>
			</view>
			<button @click="submit" style="background-color: #33ccff;font-size: 30rpx;" type="primary">登录</button>
		</uni-forms>
		<!-- 注册 -->
		<uni-forms  v-else  class="input-box" ref="registerForm" :modelValue="registerForm" :rules="registerRules"  validate-trigger="bind"  >
			<!-- <view class="wei-input">
				<icon type="waiting" color="#44ADFB" size="16"></icon>
				<input class="input" auto-focus placeholder="请输入手机号" />
			</view>
			<view class="wei-input">
				<icon type="waiting" color="#44ADFB" size="16"></icon>
				<input class="input" auto-focus placeholder="请输入6位验证码" />
				<text class="input-code" bindtap="getCode">{{codeText}}</text>
			</view> -->
			<uni-forms-item  name="username">
				<uni-easyinput type="text" v-model="registerForm.username" prefix-icon="person" focus
					placeholder="用户名" />
			</uni-forms-item>
			<uni-forms-item  name="nickname">
				<uni-easyinput type="text" v-model="registerForm.nickname" prefix-icon="person" focus
					placeholder="昵称" />
			</uni-forms-item>
			<uni-forms-item  name="password">
				<uni-easyinput type="password" v-model="registerForm.password" prefix-icon="locked" placeholder="密码" />
			</uni-forms-item>
			<uni-forms-item name="rePassword">
				<uni-easyinput type="password" v-model="registerForm.rePassword" prefix-icon="locked"
					placeholder="请确认密码" />
			</uni-forms-item>
			<button @click="register" style="background-color: #33ccff;font-size: 30rpx;" type="primary">注册</button>
		</uni-forms>
		<!-- 	<view class="sumbit-btn">
			<button class="button"  @click="submit"  style="background-color: #33ccff;font-size: 30rpx;"
				type="primary">立即{{current==1?'登录':'注册'}}</button>
		</view> -->
	</view>
	<!-- 重影 -->
	<view class="shadow shadow-1"></view>
	<view class="shadow shadow-2"></view>

</template>

<script>
	import UNI_APP from '@/.env.js'
	const baseUrl = UNI_APP.BASE_URL
	export default {

		data() {
			return {
				current: 1,
				codeText: '获取验证码',
				counting: false,
				loginForm: {
					terminal: 1, // APP终端
					username: '',
					password: ''
				},
				registerForm: {
					terminal: 1, // APP终端
					username: '',
					nickname: '',
					password: '',
					rePassword: ''
				},
				loginRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						},{
								minLength: 5,
								maxLength: 20,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						}]
					}
				},
				registerRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						},{
								minLength: 5,
								maxLength: 20,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					rePassword: {
						rules: [{
								type: 'string',
								required: true,
								errorMessage: '请确认密码',
								trigger: ['blur', 'change']
							}]
					},
					nickname: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写姓名',
							}
						]

					}
				}
			}
		},
		methods: {
			// 登陆注册监听
			click(e) {
				let index = e.currentTarget.dataset.code;
				this.current = index
			},

			submit() {
				var loginForm = this.loginForm
				if(loginForm.username == ''){
					uni.showToast({
						title:'用户名不可为空',
						icon:'none'
					})
					return
				}
				if(loginForm.password== ''){
					uni.showToast({
						title:'密码不可为空',
						icon:'none'
					})
					return
				}
				this.$http({
					url: baseUrl + '/login',
					data: this.loginForm,
					method: 'POST'
				}).then(data => {
					console.log("登录成功,自动跳转到聊天页面...")
					uni.setStorageSync("username", this.loginForm.username);
					uni.setStorageSync("password", this.loginForm.password);
					uni.setStorageSync("loginInfo", data);
					// 调用App.vue的初始化方法
					getApp().init()
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/index/index"
					})
				}).catch(error => {
					console.log("密码错误", error)
		
					uni.showToast({
						title: error.msg,
						icon: "none"
					})
				})
			},
			register() {
				var registerForm = this.registerForm
				if(registerForm.username == ''){
					uni.showToast({
						title:'用户名不可为空',
						icon:'none'
					})
					return
				}
				if(registerForm.nickname == ''){
					uni.showToast({
						title:'昵称不可为空',
						icon:'none'
					})
					return
				}
				if(registerForm.password== ''){
					uni.showToast({
						title:'密码不可为空',
						icon:'none'
					})
					return
				}
				if(registerForm.rePassword== ''){
					uni.showToast({
						title:'请确认密码',
						icon:'none'
					})
					return
				}
				if(this.registerForm.password != this.registerForm.rePassword){
					uni.showToast({
						title:'密码不一致，请重新输入',
						icon:'none'
					})
					return
				}
				this.$http({
					url: baseUrl + '/register',
					data: this.registerForm,
					method: 'POST'
				}).then(data => {
					uni.showToast({
						title:'注册成功，正在前往登录界面登录',
						icon:'none'
					})
					this.loginForm.password = registerForm.password
					this.loginForm.username = registerForm.username
					this.current =1
				
				}).catch(data=>{
					uni.showToast({
						title:data.msg,
						icon:'none'
					})
				})
			}
		},
		onLoad(options) {
		
		},
		onReady() {
			// this.$refs.loginForm.setRules(this.loginRules)
			// this.$refs.registerForm.setRules(this.registerRules)
		}
	}
</script>


<style scoped lang="less">
	/* 顶部背景 */
	.top-box {
		position: relative;
		height: 300rpx;
		background-image: linear-gradient(#44ADFB, #5ed6fd);
		padding: 30rpx;
		color: white;
		font-weight: bold;
	}

	.next-text {
		margin-top: 15rpx;
	}

	/* 内容 */
	.center-box {
		position: relative;
		background-color: white;
		margin: -20% 20rpx 0rpx 20rpx;
		padding: 25rpx;
		border-radius: 15rpx;
		-webkit-filter: drop-shadow(0 0 8rpx #44ADFB);
		filter: drop-shadow(0 0 8rpx #44ADFB);
	}

	/* 导航 */
	.nav {
		display: flex;
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 8%;
	}

	.left {
		flex: 1;
		font-weight: bold;
	}

	.right {
		flex: 1;
		font-weight: bold;
	}

	.select {
		font-weight: bold;
		color: #33ccff;
	}

	.select text {
		padding-bottom: 5rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		border-bottom: 5rpx solid #33ccff;
	}

	.wei-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.input-box {
		margin: 20rpx;
	}

	.input {
		padding-left: 20rpx;
		font-size: 30rpx;
	}

	.input-code {
		position: absolute;
		right: 40rpx;
		font-size: 26rpx;
		padding: 10rpx 15rpx;
		color: white;
		background-color: #FF8C69;
		border-radius: 10rpx;
	}

	.forget {
		font-size: 26rpx;
		color: #33ccff;
		margin-top: 20rpx;
		text-align: right;
	}

	.sumbit-btn {
		margin: 6% 30rpx 30rpx 30rpx;
	}

	/* 重影 */
	.shadow {
		box-shadow: 0rpx 0rpx 10rpx 0rpx #44ADFB;
		border-radius: 25rpx;
		background-color: white;
	}

	.shadow-1 {
		height: 40rpx;
		margin: -20rpx 50rpx 0 50rpx;
	}

	.shadow-2 {
		position: relative;
		z-index: -888;
		height: 50rpx;
		margin: -30rpx 80rpx 0 80rpx;
	}

	/* 最底部 */
	.bottom-box {
		position: fixed;
		bottom: 10rpx;
		width: 100%;
		font-size: 24rpx;
		color: gray;
		display: flex;
		justify-content: center;
	}
</style>